<template>
  <Card>
    <p slot="title">灾情指数分析</p>
    <div class="chart" id="chart-alarm-index"></div>
    <Divider></Divider>
    <span class="text">灾情指数最高：{{indexTop}}</span>
    <Spin v-show="loading" fix size="large"></Spin>
  </Card>
</template>

<script>
import echarts from 'echarts'
export default {
  name: "",
  data() {
    return {
      indexTop: "暂无数据",
      loading: false,
      districtNames:['南明区','云岩区','观山湖区','花溪区','乌当区','白云区','经开区','清镇市','息烽县','修文县','开阳县']
    };
  },
  mounted() {
      this.renderChart()
  },
  methods: {
    renderChart() {
      var data = this.districtNames.map(o=>{
          return {name:o,value:0}
      })
      this.option = {
        grid:{
          top:20,
          left:20,
          right:40,
          bottom:20,
          containLabel:true
        },
        xAxis:{
          type:'value',
          axisLine:{show:true},
          splitLine:{show:true},
          axisLabel:{show:true},
          splitArea:{show:true,color:'#00000010'}
        },
        yAxis:{
          type:'category',
          axisLine:{show:true},
          splitLine:{show:true},
          axisLabel:{show:true},
          splitArea:{show:true,color:'#00000010'},
          data:this.districtNames
        },
        series:[{
          name:'指数',
          type:'bar',
          data:data,
          itemStyle:{
            normal:{
              show:true,
              barBorderRadius:[0,8,8,0],
              color:{
                type:'linear',
                x:0,
                y:0,
                x2:0,
                y2:1,
                colorStops:[{
                  offset:0,color:this.COLORS[0]
                },{
                  offset:1,color:this.COLORS[1]
                }]
              }
            }
          },
          label:{
            show:true,
            position:'right'
          }
        }]
      }
      this.$Crender('chart-alarm-index',this.option)
    }
  }
};
</script>

<style scoped>
.chart{
    height:350px;
}
</style>